// 热门商品TOP10组件
<template>
    <el-table :data="topList" v-if="!noToken" v-loading="loading" element-loading-text="数据请求中。。。" class="table-up" size="large" stripe>
        <el-table-column prop="category" label="分类" />
        <el-table-column prop="clickCount" label="点击数（次）" />
        <el-table-column prop="orderCount" label="订单数（次）" />
        <el-table-column prop="paymentCount" label="支付数（次）" />
    </el-table>
    <el-empty v-if="noToken" description="登陆后查看数据" style="width: 100%;" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElTable } from 'element-plus';
import { HttpMethod } from '@/api/types';
import { ElMessage } from 'element-plus';
import { apiRequest } from '@/api/apiService';
import { AuthService } from '@/api/authService';

const topList = ref();              // 响应数据
const noToken = ref(true);          // 未登录状态
const loading = ref(false);         // loading标识

// 初始化
onMounted(() => {
    // 判断是否登录
    if (AuthService.getToken() == '') {
        ElMessage({
            message: '请先登录后，查看Top10商品列表！',
            type: 'error'
        });
        noToken.value = true;
    } else {
        noToken.value = false;
        refresh();
    }
});

// 刷新表格
const refresh = () => {
    loading.value = true;
    getTopList();
}

// 获取top商品列表请求
const getTopList = async () => {
    try {
        const url = '/top/';
        const customHeaders = { 'Authorization': AuthService.getToken() };
        const response = await apiRequest.request<any>(HttpMethod.POST, url, undefined, customHeaders);
        topList.value = response.data;
        loading.value = false;
    } catch (error) {
        console.log('request: /api/top/ failed, error message: ', error);
        loading.value = false;
    }
};
</script>

<style scoped>
.table-up {
    width: 60vw;
    min-width: 800px;
    margin: 10px auto;
}
</style>